<template>
    <div class="table-container">
      <el-table :data="pagedTableData" style="width: 100%" :row-style="{ height: '39px' }" :cell-style="{ fontSize: '12px' }">
        <el-table-column prop="repaircontent" label="维修内容" width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :title="scope.row.repaircontent">{{ scope.row.repaircontent }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="报名时间" width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createtime) }}
          </template>
        </el-table-column>
        <el-table-column prop="resultstatus" label="状态">
          <template slot-scope="scope">
            <el-tag>{{ formatStatus(scope.row.resultstatus) }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="totalItems"
        class="fixed-pagination"
      ></el-pagination>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  
  export default {
    data() {
      return {
        tableData: [],
        pagedTableData: [],
        currentPage: 1,
        pageSize: 4,
        totalItems: 0
      };
    },
    methods: {
      async getRepairData() {
        try {
          const { data: res } = await axios.get(
            `poster/getRepairData?currPage=0&pageNum=4`
          );
        //   console.log(res);
          this.tableData = res.data;
          this.totalItems = this.tableData.length;
          this.handlePageChange(1);
        } catch (error) {
          console.error(error);
          this.$message.error("请求失败: " + error.message);
        }
      },
      formatDate(date) {
        if (!date) return "";
        const d = new Date(date);
        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
      },
      formatStatus(status) {
        return status === 1 ? "已修复" : "未修复";
      },
      handlePageChange(page) {
        this.currentPage = page;
        const start = (page - 1) * this.pageSize;
        const end = start + this.pageSize;
        this.pagedTableData = this.tableData.slice(start, end);
      }
    },
    mounted() {
      this.getRepairData();
    }
  };
  </script>
  
  <style scoped>
  .table-container {
    position: relative;
    height: 100%;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .el-table__row {
    height: 39px !important;
  }
  
  .fixed-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 20px;
    text-align: center;
    background-color: #fff; /* 背景色，防止内容被遮挡 */
    /* padding: 10px 0; */
    z-index: 1000; /* 确保分页器在其他内容之上 */
  }
  </style>